<template>
  <div>
    <el-container>
      <el-header>

      <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item style="color:#F56C6C;">刷题王</el-menu-item>
        <el-menu-item index="/lastIndex" ><i class="el-icon-s-home" style="color: #73bbf7">首页</i></el-menu-item>
        <el-menu-item index="/userCenter" style="margin-left: 30px;"><i class="el-icon-s-custom" style="color: #73bbf7">个人中心</i></el-menu-item>
        <el-menu-item index="/uploadTopic" style="margin-left: 70px"><i class="el-icon-s-order" style="color: #73bbf7">上传题目</i></el-menu-item>
        <!--搜索和头像-->
        <!--搜索-->
        <el-input v-model="input" placeholder="快搜索题目吧QAQ" style="width: 550px;margin-left: 120px"></el-input>
        <!--搜索按钮-->
        <el-button type="primary" icon="el-icon-search" @click="needLogin"></el-button>
          <div style="margin-top: -60px;height: 30px;float: right;margin-top: 2px;">
            <!--用户头像部分-->
            <!--el-dropdown为下拉菜单-->
            <el-dropdown>
          <span class="el-dropdown-link">
            <!--用户头像图标-->
            <el-row class="demo-avatar demo-basic" style="margin-top:5px;margin-left: 5px">
            <el-col :span="12">
              <div class="sub-title"></div>
              <div class="demo-basic--circle">
                <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
              </div>
            </el-col>
          </el-row>
          </span>
            </el-dropdown>
            <el-popover
                placement="top-start"
                title="请登录"
                width="200"
                trigger="hover"
                content="登录后可以收藏题目，获得积分等哦！">
              <el-link type="primary" style="margin-top: -95px;margin-left: 20px" slot="reference" @click="loginButton">登录</el-link>
            </el-popover>
          </div>
      </el-menu>
      <!--登录弹窗-->
      <el-dialog title="卷!刷题网" :visible.sync="registerFormVisible" style="width: 750px;height:800px;margin-left:550px;overflow: hidden" >
        <!--login是定义的组件-->
        <login></login>
      </el-dialog>
    </el-header>

      <!--左侧-->
      <el-container>
        <el-aside width="420px" style="height: 770px;overflow: hidden">
          <!--公告卡片-->
          <el-card class="box-card" style="background-color: #afd4f4">
            <div slot="header" class="clearfix">
              <div style="float:left;margin-top:-90px;height: 120px">
                <span >公告</span>
                <i class="el-icon-s-flag"></i>
              </div>
            </div>
            <div style="float: left;margin-top:-90px">
              <div v-for="o in this.announcementList" :key="o" style="height: 50px;color: #409EFF">
                <span style="font-size: 13px;color: #909399">{{o.time}}</span>
                <span style="margin-left: 10px;color: #333333">{{ o.content}}</span>
              </div>
            </div>
          </el-card>
          <!--积分排行-->
          <el-card class="box-card" style="background-color: #afd4f4">
            <div slot="header" class="clearfix">
              <div style="float:left;margin-top:-90px;height: 120px">
                <span >积分排行</span>
                <i class="el-icon-top"></i>
                <el-button style="margin-left: 200px; padding: 3px 0" type="text" @click="needLogin">更多..</el-button>
              </div>
            </div>
            <div style="float: left;margin-top:-90px">
              <div v-for="o in 2" :key="o" style="height: 50px">
                {{'列表内容 ' + o }}
              </div>
            </div>
          </el-card>
          <!--站长信息-->
          <el-card class="webmaster" style="background-color: #afd4f4">
            <div slot="header" class="clearfix">
              <div style="float:left;margin-top:-90px;height: 120px">
                <span >站长</span>
                <i class="el-icon-user-solid"></i>
                <span style="margin-left: 10px;font-size: 13px;color: #333333">{{': '+this.webAdmin.nickName}}</span>
              </div>
            </div>
            <div style="float: left;margin-top:-90px">
              <div style="height: 50px">
                <span style="font-size: 13px;color: #333333">{{this.webAdmin.introduction}}</span>
              </div>
            </div>
          </el-card>
        </el-aside>
        <!--主界面-->
        <el-main >
          <el-card class="box-card" style="margin-left: -10px;margin-top:50px;width: 1040px;height: 70px">
            <div slot="header" class="clearfix" style="height: 30px;">
              <span style="float:left;margin-top: -70px;height: 30px;font-weight: bolder">精选</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="universal">
                <i class="el-icon-link" @click="needLogin">更多</i>
              </el-button>
            </div>
          </el-card>
          <el-card class="box-card" v-for="t in topicList" :key="index" style="margin-left: -10px;margin-top: -1px;width: 1040px;height: 120px">
            <div slot="" class="clearfix" style="height: 80px;">
              <span style="float:left;margin-top: -70px;height: 30px;">
                <el-link target="_blank" @click="needLogin" style="font-size: 16px;color: #000000">{{ t.content }}</el-link>
              </span>
              <div style="float:left;">
                <i class="el-icon-star-off"><span style="font-size: 12px;color:#909399;">{{t.collectNum}}</span></i>
                <i class="el-icon-chat-dot-square" style="margin-left: 30px"><span style="font-size: 12px;color:#909399;">{{t.commentNum}}</span></i>
              </div>
            </div>
            <!--<el-divider style="height: 5px"></el-divider>-->
          </el-card>
        </el-main>
      </el-container>
      <el-footer style="height: 50px;background-color: #909399">
        <i class="el-icon-message">联系作者：zrhnzlh@163.com</i>
        <i class="el-icon-position" style="margin-left: 30px">
          <el-link type="primary" href="https://gitee.com/LittleHanQAQ">gitee联系我</el-link>
        </i>
      </el-footer>
    </el-container>

  </div>
</template>

<script>


import login from "@/components/login";

export default {
  name: "lastIndex",
  components:{
    login
  },
  data(){
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      input: '',//搜索栏输入的值
      registerFormVisible:false,
      webAdmin: {
        age: '',
        id: '',
        introduction: '',
        isWebAdmin: '',
        nickName: ''
      },
      topicList: {
        collectNum: '',
        commentNum: '',
        content: ''
      },
      announcementList:[{
        id:'',content:'',time:''
      }],
    }
  },
  methods:{
    //
    universal(){
    },
    //通用的需要登录的方法
    needLogin(){
      this.$message({
        message: '请先登录',
        type: 'warning'
      });
      this.registerFormVisible=true;
    },
    //登录按钮
    loginButton(){
      this.registerFormVisible=true;
    },
    //检验用户是否登录,如果返回的code的码为201那么就跳转到index界面(见request.js中写的逻辑）
    testIsLogin(){
      this.$axios.post("/api/lastIndex/testIsLoginJ").then(resp=>{
        console.log(resp);
      })
    },
    //获取站长信息
    getWebAdminInfo(){
      this.$axios.post("/api/lastIndex/getWebAdminJ").then(resp=>{
        this.webAdmin=resp.data.data;
        console.log(resp);
      })
    },
    //获取题目
    getTopic(){
      this.$axios.post("/api/lastIndex/getTopicJ").then(resp=>{
        this.topicList=resp.data.data;
        console.log(resp);
      })
    },
    //获取网站公告
    getAnnouncementList(){
      this.$axios.get("/api/lastIndex/getAnnouncementListJ").then(resp=>{
        this.announcementList=resp.data.data;
      })
    }
  },
  created() {
    //检验用户是否登录
    this.testIsLogin();
    //加载站长信息
    this.getWebAdminInfo();
    //获取题目
    this.getTopic();
    //获取网站公告
    this.getAnnouncementList();
  }
}
</script>

<style>
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #f1f2f6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f1f2f6;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 385px;
  height:250px;
  margin-top:20px;
  margin-left:10px;
}
.webmaster{
  width: 385px;
  height:158px;
  margin-left:10px;
  margin-top:20px;
}
</style>